<template>
  <Card>
    <Api ref="apiRef" :load="page" v-model:input="input" browser>
      <Space direction="vertical">
        <Cond>
          <CondItem title="关键字" field="keyword">
            <Input v-model="input.params.keyword" placeholder="姓名/用户名" />
          </CondItem>
          <CondItem title="手机" field="mobile">
            <Input v-model="input.params.mobile" />
          </CondItem>
          <CondItem title="Email" field="email">
            <Input v-model="input.params.email" />
          </CondItem>
          <CondItem title="昵称" field="nickname">
            <Input v-model="input.params.nickname" />
          </CondItem>
          <CondItem title="创建日期" field="createdAts">
            <DateRangePicker v-model="input.params.createdAts" />
          </CondItem>
          <template #op>
            <Button shape="circle" type="primary" @click="onCreate">
              <IconPlus />
            </Button>
          </template>
        </Cond>
        <Table>
          <TableColumn title="头像" :width="80">
            <template #cell="{ row }">
              <Avatar shape="square" :size="40">
                <Image v-if="row.avatar" :src="row.avatar" />
              </Avatar>
            </template>
          </TableColumn>
          <TableColumn title="姓名" field="name">
            <template #cell="{ row }">
              <Popover position="right">
                <Button is-text @click="onView(row)" :text="row.name" />
                <template #content>
                  <Space>
                    <Button @click="onUpdate(row)"> 编辑</Button>
                    <Button @click="onDelete(row.id)">删除</Button>
                  </Space>
                </template>
              </Popover>
            </template>
          </TableColumn>
          <TableColumn title="用户名" field="username" />
          <TableColumn title="证件号" field="idNo" />
          <TableColumn title="昵称" field="nickname" />
          <TableColumn title="性别" field="gender" format="Enum" params="Gender" />
          <TableColumn title="状态" field="status" format="Enum" params="UserStatus" />
          <TableColumn title="创建日期" :width="120" field="createdAt" type="Date" sortable />
          <TableColumn title="更新日期" :width="120" field="updatedAt" type="Date" sortable />
        </Table>
      </Space>
    </Api>
  </Card>
</template>

<script setup lang="ts">
import { defineAsyncComponent, ref } from 'vue'
import { Avatar, Button, Card, Cond, CondItem, DateRangePicker, Image, Input, Modal, Popover, Space, Table, TableColumn } from '@idmy/ui'
import { Api, cfg, useDelete } from '@idmy/core'
import { del, page } from './services'
import { IconPlus } from '@idmy/ui-icon'

const Create = defineAsyncComponent(() => import('../create/index.vue'))

const input = ref({
  sorts: ['createdAt', 'desc'],
  params: {
    status: 'NORMAL',
    mobile: undefined,
    email: undefined,
    nickname: undefined,
    gender: undefined,
    createdAts: [],
  },
})
const apiRef = ref()
const onLoad = () => apiRef.value.onLoad()

const onDelete = useDelete(del, onLoad)

const onCreate = () => Modal.open({ component: Create, title: '创建账号', width: 2, enableLock: true })

const onUpdate = model =>
  Modal.open({
    component: Create,
    title: '修改账号',
    width: 2,
    props: { model },
    onClose: () => onLoad(),
  })

const onView = model =>
  Modal.open({
    component: Create,
    width: 2,
    title: '账号详细',
    props: { model, mode: 'read' },
  })
</script>
